
import SingleListType from './SingleListType';
import MultipleListType from './MultipleListType';
import DatePicker from './DatePicker';
import DateRangePicker from './DateRangePicker';
import DashBoard from './DashBoard';
import RangeSelect from './RangeSelect';
import Title from './Title';
import BackGround from './BackGround';
import Border from './Border';
import TableBody from './TableBody';
import TableHeader from './TableHeader';
import TableLine from './TableLine';
import React from 'react';
import { Collapse } from 'antd';
import PieCustomColor from './PieCustomColor';
import PieLegend from './PieLegend';
import PieLabel from './PieLabel';
import PieTooltip from './PieTooltip';
import ChartsSize from './ChartsSize';
import LiquidCustomColor from './LiquidCustomColor';
import LiquidCustomQuota from './LiquidCustomQuota';
import CoreCustomQuota from './CoreCustomQuota';
import QuotaQOQ from './QuotaQOQ';
import QuotaCustomColor from './QuotaCustomColor';
import LineCustomColor from './Line/CustomColor';
import ToolTip from './Line/ToolTip';
import LineLabelSetting from './Line/LabelSetting';
import XAxis from './Line/XAxis';
import YAxis from './Line/YAxis';
import DXAxis from './Line/DXAxis';
import LYAxis from './Line/LYAxis';
import RYAxis from './Line/RYAxis';
import WheelBase from './WheelBase';
import GaugeCustom from './GaugeCustom';
import GaugeCustomColor from './GaugeCustomColor';
import ColumnSetting from './Column/ColumnSetting';
import ColumnLabelSetting from './Column/LabelSetting';
import WordCustomIndicator from './WordCloud/CustomIndicator';
import ScatterCustomColor from './Scatter/CustomColor';
import ScatterLabelSetting from './Scatter/LabelSetting';
import MapLabel from './Map/MapLabel';
import MapCustomColor from './Map/MapCustomColor';
import BulletCustomColor from './Bullet/CustomColor';
import BulletLabelSetting from './Bullet/LabelSetting';
import LineSetting from './Column/LineSetting';
import FilterColorTheme from './FilterColorTheme';

interface IProps {
	currentType: string;
	typeconfig: any;
	config: any;
	styleForm: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	layoutConfig: Array<any>;
	layoutConfChange: ( config ) => void;
}

const StyleIndex = ( props: IProps ) => {
	const { Panel } = Collapse;
	const { config, styleForm, currentType, typeconfig, onValuesChange, layoutConfig } = props;
    
	// console.log( config );
    
	return (
		<Collapse defaultActiveKey={[ 'title' ]} ghost>
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'title' ) !== -1 &&
                ( <Panel header="标题" key="title" >
                	<Title config={config} form={styleForm} onValuesChange={onValuesChange}></Title>
                </Panel> )
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'chartsSize' ) !== -1 &&
				( <Panel header="图表宽高" key="chartssize">
					<ChartsSize
						config={config} form={styleForm} onValuesChange={onValuesChange} layoutConfig={layoutConfig} layoutConfChange={props.layoutConfChange}></ChartsSize>
				</Panel> )
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'background' ) !== -1 &&
                ( <Panel header="图表背景" key="background">
                	<BackGround config={config} form={styleForm} onValuesChange={onValuesChange}></BackGround>
                </Panel> )
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'border' ) !== -1 &&
                ( <Panel header="边框样式" key="border">
                	<Border config={config} form={styleForm} onValuesChange={onValuesChange}></Border>
                </Panel> )
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'tableHead' ) !== -1 &&
                ( <Panel header="表头" key="tablehead">
                	<TableHeader config={config} form={styleForm} onValuesChange={onValuesChange}></TableHeader>
                </Panel> )
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'tableBody' ) !== -1 &&
                ( <Panel header="表格" key="tablebody">
                	<TableBody config={config} form={styleForm} onValuesChange={onValuesChange}></TableBody>
                </Panel> )
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'tableLine' ) !== -1 &&
                ( <Panel header="表格边框线" key="tableline">
                	<TableLine config={config} form={styleForm} onValuesChange={onValuesChange}></TableLine>
                </Panel> )
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'showTypeSingle' ) !== -1 &&
                ( <Panel header="展示样式" key="singlelisttype">
                	<SingleListType config={config} form={styleForm} onValuesChange={onValuesChange}></SingleListType>
                </Panel> )
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'showTypeMul' ) !== -1 &&
                ( <Panel header="展示样式" key="multiplelisttype">
                	<MultipleListType config={config} form={styleForm} onValuesChange={onValuesChange}></MultipleListType>
                </Panel> )
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'datePicker' ) !== -1 &&
                ( <Panel header="日期选择" key="datepicker">
                	<DatePicker config={config} form={styleForm} onValuesChange={onValuesChange}></DatePicker>
                </Panel> )
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'dateRangePicker' ) !== -1 &&
                ( <Panel header="日期范围选择" key="daterangepicker">
                	<DateRangePicker config={config} form={styleForm} onValuesChange={onValuesChange}></DateRangePicker>
                </Panel> )
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'dashboard' ) !== -1 &&
                ( <Panel header="仪表盘" key="dashboard">
                	<DashBoard config={{ dashBoradColorConfig: [], ...config }} form={styleForm} onValuesChange={onValuesChange}></DashBoard>
                </Panel> )
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'rangeselect' ) !== -1 &&
                ( <Panel header="范围选择" key="rangeselect">
                	<RangeSelect config={config} form={styleForm} onValuesChange={onValuesChange}></RangeSelect>
                </Panel> )
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'lineCustomColor' ) !== -1 &&
				( <Panel header="自定义配色" key="lineCustomColor">
					<LineCustomColor config={config} form={styleForm} onValuesChange={onValuesChange}></LineCustomColor>
				</Panel> )
			}

			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'quotaCustomColor' ) !== -1 &&
				( <Panel header="自定义配色" key="quotaCustomColor">
					<QuotaCustomColor config={config} form={styleForm} onValuesChange={onValuesChange}></QuotaCustomColor>
				</Panel> )
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'scatterCustomColor' ) !== -1 &&
				( <Panel header="自定义配色" key="scatterCustomColor">
					<ScatterCustomColor config={config} form={styleForm} onValuesChange={onValuesChange}></ScatterCustomColor>
				</Panel> )
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'BulletCustomColor' ) !== -1 &&
				( <Panel header="自定义配色" key="bulletCustomColor">
					<BulletCustomColor config={config} form={styleForm} onValuesChange={onValuesChange}></BulletCustomColor>
				</Panel> )
			}

			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'customColor' ) !== -1 &&
				( <Panel header="自定义配色" key="customColor">
					<PieCustomColor config={config} form={styleForm} onValuesChange={onValuesChange}></PieCustomColor>
				</Panel> )
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'legend' ) !== -1 &&
				( <Panel header="图例" key="legend">
					<PieLegend config={config} form={styleForm} onValuesChange={onValuesChange}></PieLegend>
				</Panel> )
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'label' ) !== -1 &&
				( <Panel header="标签" key="label">
					<PieLabel config={config} form={styleForm} onValuesChange={onValuesChange}></PieLabel>
				</Panel> )
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'lineLabelSetting' ) !== -1 &&
				( <Panel header="标签" key="lineLabelSetting">
					<LineLabelSetting config={config} form={styleForm} onValuesChange={onValuesChange}></LineLabelSetting>
				</Panel> )
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'columnLabelSetting' ) !== -1 &&
				( <Panel header="标签" key="columnLabelSetting">
					<ColumnLabelSetting config={config} form={styleForm} onValuesChange={onValuesChange}></ColumnLabelSetting>
				</Panel> )
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'scatterLabelSetting' ) !== -1 &&
				( <Panel header="标签" key="scatterLabelSetting">
					<ScatterLabelSetting config={config} form={styleForm} onValuesChange={onValuesChange}></ScatterLabelSetting>
				</Panel> )
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'bulletLabelSetting' ) !== -1 &&
				( <Panel header="标签" key="bulletLabelSetting">
					<BulletLabelSetting config={config} form={styleForm} onValuesChange={onValuesChange}></BulletLabelSetting>
				</Panel> )
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'tooltip' ) !== -1 &&
				( <Panel header="提示" key="tooltip">
					<PieTooltip config={config} form={styleForm} onValuesChange={onValuesChange}></PieTooltip>
				</Panel> )
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'lineTooltip' ) !== -1 &&
				( <Panel header="提示" key="lineTooltip">
					<ToolTip config={config} form={styleForm} onValuesChange={onValuesChange}></ToolTip>
				</Panel> )
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'columnSetting' ) !== -1 &&
				(
					<Panel header="柱体设置" key="columnsetting">
						<ColumnSetting config={config} form={styleForm} onValuesChange={onValuesChange}></ColumnSetting>
					</Panel>
				)
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'lineSetting' ) !== -1 &&
				(
					<Panel header="线条设置" key="linesetting">
						<LineSetting config={config} form={styleForm} onValuesChange={onValuesChange}></LineSetting>
					</Panel>
				)
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'liquidCustomColor' ) !== -1 &&
				(
					<Panel header="自定义配色" key="liquidCustomColor">
						<LiquidCustomColor config={config} form={styleForm} onValuesChange={onValuesChange}></LiquidCustomColor>
					</Panel>
				)
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'liquidCustomQuota' ) !== -1 &&
				(
					<Panel header="自定义指标" key="liquidCustomQuota">
						<LiquidCustomQuota config={config} form={styleForm} onValuesChange={onValuesChange}></LiquidCustomQuota>
					</Panel>
				)
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'coreCustomQuota' ) !== -1 &&
				(
					<Panel header="自定义指标" key="coreCustomQuota">
						<CoreCustomQuota config={config} form={styleForm} onValuesChange={onValuesChange}></CoreCustomQuota>
					</Panel>
				)
			}

			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'QOQ' ) !== -1 &&
				(
					<Panel header="环比/同比样式" key="QOQ">
						<QuotaQOQ config={config} form={styleForm} onValuesChange={onValuesChange}></QuotaQOQ>
					</Panel>
				)
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'XAxis' ) !== -1 &&
				(
					<Panel header="X轴" key="XAxis">
						<XAxis config={config} form={styleForm} onValuesChange={onValuesChange}></XAxis>
					</Panel>
				)
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'YAxis' ) !== -1 &&
				(
					<Panel header="Y轴" key="YAxis">
						<YAxis config={config} form={styleForm} onValuesChange={onValuesChange}></YAxis>
					</Panel>
				)
			}
			
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'gaugeCustom' ) !== -1 &&
				(
					<Panel header="自定义指标" key="gaugeCustom">
						<GaugeCustom config={config} form={styleForm} onValuesChange={onValuesChange}></GaugeCustom>
					</Panel>
				)
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'gaugeCustomColor' ) !== -1 &&
				(
					<Panel header="自定义颜色" key="gaugeCustomColor">
						<GaugeCustomColor config={config} form={styleForm} onValuesChange={onValuesChange}></GaugeCustomColor>
					</Panel>
				)
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'DXAxis' ) !== -1 &&
				(
					<Panel header="X轴" key="DXAxis">
						<DXAxis config={config} form={styleForm} onValuesChange={onValuesChange}></DXAxis>
					</Panel>
				)
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'LYAxis' ) !== -1 &&
				(
					<Panel header="左Y轴" key="LYAxis">
						<LYAxis config={config} form={styleForm} onValuesChange={onValuesChange}></LYAxis>
					</Panel>
				)
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'RYAxis' ) !== -1 &&
				(
					<Panel header="右Y轴" key="RYAxis">
						<RYAxis config={config} form={styleForm} onValuesChange={onValuesChange}></RYAxis>
					</Panel>
				)
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'YLYAxis' ) !== -1 &&
				(
					<Panel header="Y轴" key="YLYAxis">
						<LYAxis config={config} form={styleForm} onValuesChange={onValuesChange}></LYAxis>
					</Panel>
				)
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'WheelBase' ) !== -1 &&
				(
					<Panel header="轴边距" key="WheelBase">
						<WheelBase config={config} form={styleForm} onValuesChange={onValuesChange}></WheelBase>
					</Panel>
				)
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'WordCustomIndicator' ) !== -1 &&
				(
					<Panel header="自定义指标" key="WordCustomIndicator">
						<WordCustomIndicator config={config} form={styleForm} onValuesChange={onValuesChange}></WordCustomIndicator>
					</Panel>
				)
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'mapCustomColor' ) !== -1 &&
				(
					<Panel header="自定义配色" key="mapcustomcolor">
						<MapCustomColor config={config} form={styleForm} onValuesChange={onValuesChange}></MapCustomColor>
					</Panel>
				)
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'MapLabel' ) !== -1 &&
				(
					<Panel header="区域名称" key="maplabel">
						<MapLabel config={config} form={styleForm} onValuesChange={onValuesChange}></MapLabel>
					</Panel>
				)
			}
			{
				typeconfig[currentType] && typeconfig[currentType].indexOf( 'filterColorTheme' ) !== -1 &&
				(
					<Panel header="颜色主题" key="filterColorTheme">
						<FilterColorTheme config={config} form={styleForm} onValuesChange={onValuesChange}></FilterColorTheme>
					</Panel>
				)
			}
		</Collapse>
	);
};

export default React.memo( StyleIndex );
